<template>
  <div>
    <p>控制器：</p>
    <div class="head">
      <div class="block">
        <el-row>
          <el-col :span="3">
            <el-select @change="handleChange" v-model="value" placeholder="请选择控制器">
              <el-option
                v-for="item in collect_info"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple-dark">
              <div>功能说明:{{this.monitor_infoA.note}}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-dark">
              <div>判断依据:{{this.monitor_infoA.YIJU}}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-dark">
              <div>采集器数量:{{this.monitor_infoA.infonum}}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-dark">
              <div>位置说明:{{this.monitor_infoA.location}}</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div >
        <el-card class="monitorStatus">
          <span class="top">{{this.monitor_infoA.name}}控制器当前状况:</span>
          <el-row>
            <el-col :span="5">
              <div class="grid-content bg-purple">打开阈值：{{this.monitor_infoA.open}}</div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">上传周期：{{this.monitor_infoA.close}}</div>
            </el-col>
            <el-col :span="9">
              <div class="grid-content bg-purple">设置时间：{{this.monitor_infoA.set_time}}</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                当前状态：
                <template v-if="this.monitor_infoA.state==1">正常</template>
                <template v-if="this.monitor_infoA.state==0">异常</template>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">开启时长：{{this.monitor_infoA.time}}</div>
            </el-col>
            <el-col :span="9">
              <div class="grid-content bg-purple">最近启动：{{this.monitor_infoA.start_time}}</div>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>
    <div class="pic">
      <img :src="imgUrl" />
    </div>
    <div class="all_data">
      <!-- v-if="this.monitor_infoB.length!=0" -->
      <div class="data">
        <el-table :data="monitor_infoB" border style="width: 100%">
          <el-table-column prop="unit" label="采集器" width="130"></el-table-column>
          <el-table-column prop="unit_id" label="编号" width="130"></el-table-column>
          <el-table-column prop="unit_note" label="说明" width="130"></el-table-column>
          <el-table-column prop="tem" label="温度(℃)" width="130"></el-table-column>
          <el-table-column prop="hum" label="湿度（°）" width="130"></el-table-column>
          <el-table-column prop="con" label="浓度（%）" width="130"></el-table-column>
        </el-table>
      </div>
    </div>
    <div>
      <el-card id="data_thread">请选择控制器展示实时数据哦
      </el-card>
    </div>
  </div>
</template>
<script>
import axios from "../plugins/axios";
// require("@/mock/analyzeInfo.js");
export default {
  data() {
    return {
      imgUrl: require("../assets/southeast.jpg"),
      value: "",
      collect_info: [],
      monitor_infoA: {},
      monitor_infoB: [],
      Model: false,
      form: {},
      analyze_Info: [],
      arrTem: [],
      arrHum: [],
      arrName: [],
      arrType: [],
      arrCon: [],
      i:{},
    };
  },
  // watch: {
  //   arrName: function(val) {
  //     console.log("test" + val);
  //     if (this.arrName.length > 3) {
  //       this.arrName.shift();
  //     }
  //     this.arrName = val;
  //     // console.log(this.arrName);
  //   },
  //   arrTem: function(val) {
  //     if (this.arrTem.length > 3) {
  //       this.arrTem.shift();
  //     }
  //   },
  //   arrHum: function(val) {
  //     if (this.arrHum.length > 3) {
  //       this.arrHum.shift();
  //     }
  //   },
  //   arrCon: function(val) {
  //     if (this.arrCon.length > 3) {
  //       this.arrCon.shift();
  //     }
  //   }
  // },
  created: function() {
    axios.get("/action/devices_info").then(response => {
      this.collect_info = response.data.device_info;
    });
  },
  mounted() {
  },
  beforeDestory() {
    clearInterval(this.timer)
  },
  methods: {
    getInfo(value) {
      console.log(value+"我是getinfo中的value");
      var echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("data_thread"));
      myChart.showLoading();
      this.timer = setInterval(() => {
        axios
          .post("/action/analyzeInfo",{id:this.i}) 
          .then(response => {
            const list = response.data.analyze_Info || []
            this.analyze_Info = response.data.analyze_Info;
            console.log(this.i+"我是getinfo axios中的value", list);
            for (let i = 0; i < list.length; i++) {
              this.arrName[i]=this.analyze_Info[i].name;
              this.arrTem[i]=this.analyze_Info[i].tem ;
              this.arrHum[i]=this.analyze_Info[i].hum;
              this.arrCon[i]=this.analyze_Info[i].con;
            }
            this.drawLine(myChart);
          })
          .catch(error => {
            console.log(error);
          });
      }, 3000);
    },
    drawLine(myChart) {
      myChart.hideLoading();
      myChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: this.arrType
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.arrName
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "温度",
            type: "line",
            data: this.arrTem
          },
          {
            name: "湿度",
            type: "line",
            data: this.arrHum
          },
          {
            name: "浓度",
            type: "line",
            data: this.arrCon
          }
        ]
      },true);
    },
    handleChange(value) {
      
      console.log(value);
      axios
        .post("/action/monitor_status", { oper: "1", id: value })
        .then(response => {
          // console.log(response.data);
          this.monitor_infoA = response.data.monitor_info[0];
        });

      axios
        .post("/action/monitor_status", { oper: "2", id: value })
        .then(response => {
          this.monitor_infoB = response.data.monitor_info;
        });
      console.log("handleChange的value"+value);
      this.i=value;
      this.getInfo(value);
    },
    ModelValue() {
      axios
        .post("/action/monitor_oper", {
          id: this.value,
          open: this.form.open,
          close: this.form.close
        })
        .then(res => {
          if (res.data.code == "1") {
            this.$message({
              message: "修改成功",
              type: "success"
            });
            this.Model = false;
            this.handleChange(this.value);
          }
        });
    }
  }
};
</script>

<style scoped>
.data {
  margin: 220px auto;
  position: absolute;
  top: 19%;
  left:16.5%;
  width: 53%;
  border: 1px solid black;
}
.head {
  position: absolute;
  top: 15%;
  left:16.5%;
  width: 53%;
  padding: 3px;
  margin: 0px;
  height: 40px;
  border: 1px solid black;
}
.block {
  width: 100%;
}
.pic > img {
  position: absolute;
  top: 16%;
  left: 72.5%;
  width: 25%;
  height: 24%;
  padding: 0;
  margin: 0;
  border: 1px solid black;
}
p {
  position: absolute;
  top: 16%;
  left: 10%;
  width: 10%;
  font-size: 14px;
}
.el-col {
  text-align: center;
  padding: 0;
  height: 40px;
  line-height: 40px;
}
.monitorStatus {
  position: absolute !important;
  left: 5%;
  width:  1022px !important;
  height:150px !important;
  border: 1px solid black;
  text-align: left;
  margin: 27px -53px;
  padding: 0px;
}

#data_thread {
  position: absolute;
  top: 43%;
  left: 72.5%;
  width: 25%;
  height: 50%;
  padding: 0;
  margin: 0;
  border: 1px solid black;
}
</style>


